<template>
	<div class="footer">
		<div class="linkBox">
			<div class="qrCode">
				<div class="qr-list">
					<img src="../assets/img/f.png" alt="">
				</div>

				<div class="qr-phone">
					<div class="phone-box">
						<img src="../assets/img/phoneIco.png" alt="">
						<span>{{ siteIfon.site_400 }}</span>
					</div>
					<div class="arrdes">
						中国（云南）自由贸易试验区昆明片区经济技术开发区林溪路188号
					</div>
				</div>
			</div>
			<div class="links">
				<div class="img-box">
					<img src="../assets/img/footer-log.png" alt="">
				</div>
				<div class="linksbox">
					<div v-for="l in link" :key="l.id" class="link-item" style="cursor: pointer" @click="toLink(l)">
						{{ l.name }}
					</div>
				</div>
			</div>
		</div>
		<!-- <div class="linkBox">
      <div class="links">
        <div
          v-for="l in link"
          :key="l.id"
          class="link-item"
          style="cursor: pointer"
          @click="toLink(l)"
        >
          <span class="dian" />{{ l.name }}
        </div>
      </div>
      <el-divider direction="vertical" />
      <div class="concat">
        <div class="phone">
          <img
            src="../assets/img/logo3.png"
            alt=""
          >
          <span>{{ siteIfon.site_400 }}</span>
        </div>
        <div class="code">
          <p class="code-item">
            <span class="dian" />{{ siteIfon.beian }}
          </p>
          <p class="code-item">
            <span class="dian" />{{ siteIfon.gongan_beian }}
          </p>
          <p class="code-item">
            <span class="dian" />{{ siteIfon.jy_card }}
          </p>
        </div>
      </div>
      <el-divider direction="vertical" />
      <div class="qrCode">
        <div class="qr-list">
          <img
            src="../assets/img/app.png"
            alt=""
          >
          <span>App-ios</span>
        </div>
        <div class="qr-list">
          <img
            src="../assets/img/app.png"
            alt=""
          >
          <span>App-安卓</span>
        </div>
        <div class="qr-list">
          <img
            src="../assets/img/weixin.jpg"
            alt=""
          >
          <span>微信公众号</span>
        </div>
      </div>
    </div> -->
		<div class="companyInfo">
			<div class="date">
				©2020-2030 云南建投物流有限公司 All Rights Reserved

			</div>
			<div class="site-icon">


				<a target="_blank"
					href="http://wljg.ynaic.gov.cn/ynwjww/indexquery/indexqueryAction!dizview.dhtml?chr_id=6f0cfa590fda5d1a82d5d7f13bdd2e94&bus_ent_id=530000D000008841&bus_ent_chr_id=43f1f064186b42f2940baba4ba6bb15f">
					<img src="../assets/img/2@2x(2).png" alt="">
				</a>
				<a target="_blank" href="https://si.trustutn.org/info?sn=818181022037177633824&certType=1">
					<img src="../assets/img/3@2x(1).png" alt="">

				</a>



				<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=53019102000142">
					<img src="../assets/img/tagImg.png" alt="">
				</a>
				<div class="site">
					<a target="_blank"
						href="https://beian.miit.gov.cn/#/Integrated/index">{{ siteIfon.beian }}&nbsp;&nbsp;</a>
					<a target="_blank"
						href="https://www.inja.com/static/media/%E5%A2%9E%E5%80%BC%E7%94%B5%E4%BF%A1%E4%B8%9A%E5%8A%A1%E8%AE%B8%E5%8F%AF%E8%AF%81.0cb15c44.jpg">{{ siteIfon.jy_card }}&nbsp;&nbsp;</a>
					<a target="_blank"
						href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=53019102000142">{{ siteIfon.gongan_beian }}</a>
				</div>







			</div>
			<div class="date_2">
				<!-- <div>技术支持：云南建投</div>
				<div class="data-item">
					<div>手机APP下载：</div>
					<div class="buttonSpan">
						<el-popover placement="top-start" trigger="click">
							<img src="../assets/img/app.png" alt="" style="
                  width: 5.44rem;
                  height: 5.44rem;
                  background: rgba(71, 71, 71, 1);
                  margin: 0 auto;
                  text-align: center;
                  display: flex;">
							<div slot="reference" class="appbox">
								<img src="../assets/img/iosIco_35.png" alt="">
								<span class="light">IOS</span>
							</div>
						</el-popover>
					</div>

					<div class="buttonSpan">
						<el-popover placement="top-start" trigger="click">
							<img src="../assets/img/app.png" alt="" style="
                  width: 5.44rem;
                  height: 5.44rem;
                  background: rgba(71, 71, 71, 1);
                  margin: 0 auto;
                  text-align: center;
                  display: flex;">
							<div slot="reference" class="appbox">
								<img src="../assets/img/anIco_35.png" alt="">
								<span class="light">Android</span>
							</div>
						</el-popover>
					</div> -->

					<el-popover placement="top-start" trigger="click" width="600" @hide="hide">
						<el-form ref="form" :model="form" label-width="180px">
							<el-form-item label="投诉类型">
								<el-select v-model="form.back_category_id" placeholder="请选择投诉类型" style="width:100%">
									<el-option v-for="(item, index) in BackCategoryList" :key="index" :label="item.name"
										:value="item.id" />
								</el-select>
							</el-form-item>

							<el-form-item label="投诉建议">
								<el-input v-model="form.content" rows="3"
									placeholder="请写下您对营家商城的感受，我们将认真听取您的意见，努力提供更优质的服务。" type="textarea" />
							</el-form-item>

							<el-form-item label="联系方式">
								<el-input v-model="form.connect" placeholder="手机/邮箱/QQ(选填)" type="text" />
							</el-form-item>

							<el-form-item label="上传图片（最多6张）">
								<el-upload :action="`${base.sq}`+ '/client/FileUpload/upload?size=M&terminaltype=PC'"
									list-type="picture-card" :on-success="handlePictureCardPreview"
									:on-remove="handleRemove" :limit="6" :file-list="fileList">
									<i class="el-icon-plus" />
								</el-upload>
								<el-dialog :visible.sync="dialogVisible">
									<img width="100%" :src="form.images" alt="">
								</el-dialog>
							</el-form-item>

							<el-form-item>
								<el-button class="onSubmitButton" round size="small" @click="onSubmit">
									提交
								</el-button>
							</el-form-item>
						</el-form>
						<div slot="references">
							<div class="buttons">
								<a class="tsBtn" target="_blank" href="mailTo:ynjtwljw@ysyec.com">举报邮箱</a>
							</div>
						</div>
					</el-popover>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import base from '@/api/base'; // 导入接口域名列表
	export default {
		name: "",
		components: {},
		data() {
			return {
				siteIfon: {},
				link: [],
				base,
				BackCategoryList: [],
				ImagesArr: [],
				fileList: [],
				// 投诉中心
				dialogVisible: false,
				form: {
					back_category_id: '', // 投诉类型
					content: '', // 投诉建议
					connect: '', // 联系方式
					images: '',
				}
			};
		},
		mounted() {
			this.getData();
			this.BackCategoryData()
			console.log('abase', this.base)
		},
		methods: {
			getData() {
				//中间部分备案号
				this.$api.home.footersite().then((res) => {
					if (res.code == 1) {
						this.siteIfon = res.data;
					} else {
						this.$message.error(res.msg);
					}
				});
				//外链列表
				this.$api.home.footerline().then((res) => {
					if (res.code == 1) {
						this.link = res.data;
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			// 类型列表
			BackCategoryData() {
				this.$api.commit.BackCategory().then(res => {
					console.log('类型列表', res)
					this.BackCategoryList = res.data
				})
			},
			// 提交
			onSubmit() {
				console.log('提交', this.form, this.fileList)
				let params = this.form
				this.$api.commit.FeedbackApi(params).then(res => {
					if (res.code === 1) {
						this.$message.success('提交成功')
					} else {
						this.$message.error(res.msg);
					}
				})
			},
			// 移除
			handleRemove(file, fileList) {
				console.log('移除', file, fileList);
				let NewFileList = []
				for (let i = 0; i < fileList.length; i++) {
					NewFileList.push(fileList[i].response.data.imgurl)
				}
				this.ImagesArr = NewFileList
				this.ImagesArrToString(NewFileList)
			},
			// 上传成功
			handlePictureCardPreview(response, file, fileList) {
				console.log('上传', response, file, fileList)
				let NewFileList = []
				for (let i = 0; i < fileList.length; i++) {
					NewFileList.push(fileList[i].response.data.imgurl)
				}
				this.ImagesArr = NewFileList
				this.ImagesArrToString(NewFileList)
			},
			// 图片格式转化
			ImagesArrToString(ImagesArr) {
				console.log('图片格式转化', ImagesArr)
				this.form.images = ImagesArr.join(',')
			},
			// 提示隐藏
			hide() {
				console.log('提示隐藏', )
				this.form = {
					back_category_id: '', // 投诉类型
					content: '', // 投诉建议
					connect: '', // 联系方式
					images: '',
				}
				this.ImagesArr = []
				this.fileList = []
			},
			//跳转
			toLink(item) {
				window.open(item.url);
				
				
				
				  
			},
		},
	};
</script>

<style scoped lang="scss">
	.footer {
		height: 25rem;
		position: relative;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		z-index: 10;
		box-shadow: 0px 0px 10px #eee;

		.linkBox {
			height: 21.56rem;
			background: #222222;
			display: flex;
			align-items: center;
			padding: 0 10rem;

			.el-divider--vertical {
				height: 7.13rem;
			}

			.links {
				display: flex;
				width: 100%;
				flex-direction: column;

				.img-box {
					display: flex;
					justify-content: flex-end;
					margin: 0 0 1rem 0;

					img {
						max-width: 100%;
						height: 1.875rem;
					}
				}

				.linksbox {
					width: 100%;
					border-top: 1px solid rgba(255, 255, 255, .1);
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: space-between;
					opacity: 0.8;

					.link-item {
						font-size: 1rem;
						font-family: "Noto Sans SC";
						font-weight: 400;
						color: #a9a9a9;
						padding: 1.5rem 0.6rem;
						line-height: 1.6;

						&:hover {
							color: #fff;
						}
					}
				}
			}

			.concat {
				display: flex;
				flex-direction: column;

				.phone {
					img {
						width: 1.88rem;
						height: 1.19rem;
						margin-right: 0.44rem;
					}

					span {
						font-size: 1.5rem;
						font-family: "Noto Sans SC";
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
					}
				}

				.code {
					margin-top: 1.62rem;
					display: flex;
					flex-direction: column;

					.code-item {
						font-size: 0.88rem;
						font-family: "Noto Sans SC";
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						line-height: 1.88rem;
					}
				}
			}

			.qrCode {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-right: 10.625rem;

				.qr-list {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 2.5rem;

					img {
						width: 8rem;
						height: 8rem;
						background: rgba(71, 71, 71, 1);
					}

					span {
						font-size: 0.75rem;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
					}
				}

				.qr-phone {
					display: flex;
					flex-direction: column;
					width: 23rem;
					;

					.phone-box {
						display: flex;
						color: #a9a9a9;
						align-items: center;
						height: 5rem;

						span {
							font-size: 2rem;
							margin-left: 1rem;
							font-family: 'Gotham';

							&:hover {
								color: #fff;
							}
						}
					}

					.arrdes {
						color: #a9a9a9;
						font-weight: 500;
						font-size: 1rem;
						line-height: 1.6;
						font-family: "Noto Sans SC";
					}
				}
			}
		}

		.companyInfo {
			height: 3.44rem;
			background: #191919;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 10.25rem;

			.date {
				font-size: 0.9rem;
				font-family: "Noto Sans SC";
				font-weight: 400;
				color: #8c8c8c;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.data-item {
					display: flex;
					align-items: center;

					.buttonSpan {
						margin-right: 1rem;
						cursor: pointer;

						img {
							width: .9rem;
						}



					}

					.buttons {
						background: #252525;
						padding: .5rem 1rem;
						border-radius: 1rem;
						cursor: pointer;



					}
				}

			}

			.date_2 {
				font-size: 0.9rem;
				font-family: "Noto Sans SC";
				font-weight: 400;
				color: #8c8c8c;
				display: flex;
				width: 30rem;
				align-items: center;
				justify-content: space-between;

				.data-item {
					display: flex;
					align-items: center;

					.buttonSpan {
						margin-right: 1rem;
						cursor: pointer;
						display: flex;
						justify-content: flex-start;
						align-items: center;

						img {
							width: .9rem;
							margin-right: 0.2rem;
						}
					}

					.buttons {
						background: #252525;
						padding: .5rem 1rem;
						border-radius: 1rem;
						cursor: pointer;
					}
				}

			}

			.site-icon {
				display: flex;
				color: #8c8c8c;
				font-size: .88rem;
				align-items: center;
				width: 42rem;

				img {
					margin-right: 0.2rem;
					cursor: pointer;
				}
			}

		}


	}

	.onSubmitButton {
		background: black;
		color: #fff;
		border: black;
	}

	.onSubmitButton:hover {
		background: black;
		color: #fff;
		border: black;
	}

	.onSubmitButton:focus,
	.onSubmitButton:hover {
		color: #fff;
		border-color: black;
		background-color: black;
	}

	.appbox {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.light {
		&:hover {
			color: #fff;
		}
	}
</style>
